<template>
  <div class="app-container">
    <el-card class="box-card">

      <el-form ref="form" :label-position="labelPosition" label-width="50px">
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <el-form-item label="名称:">
                  <el-input v-model="search.name" size="mini" placeholder="请输入名称查询" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年龄:">
                  <el-input v-model="search.age" size="mini" placeholder="请输入年龄查询" />
                </el-form-item>
              </el-col>
            </el-row>

          </el-col>
          <el-col :span="12" style="padding-top: 5px;">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <el-button type="primary" size="mini" icon="el-icon-refresh-right" @click="onSubmit">重置</el-button>
            <el-button type="primary" size="mini" @click="onSubmit">
              <svg t="1684762554203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2804" width="10" height="10">
                <path
                  d="M834.389333 94.993067c27.648 0 50.176 22.289067 50.176 49.664 0 12.1856-4.3008 23.517867-12.424533 32.6656l-2.423467 2.901333-264.430933 271.018667c-11.810133 12.117333-18.432 28.330667-18.432 45.1584v383.658666l-164.181333-131.720533v-260.130133c0-16.896-6.621867-33.109333-18.432-45.1584l-255.317334-261.9392a48.298667 48.298667 0 0 0-3.4816-4.437334 48.674133 48.674133 0 0 1-11.810133-32.017066c0-27.374933 22.528-49.664 50.176-49.664h650.581333M864.324267 0H159.675733C90.487467 0 34.133333 55.330133 34.133333 123.357867c0 29.3888 10.513067 57.344 29.661867 79.530666 1.4336 2.286933 3.106133 4.437333 5.0176 6.314667l278.4256 283.579733v296.448c0 10.5472 4.778667 19.899733 12.288 26.248534l1.262933 1.194666 250.2656 199.304534c6.4512 5.393067 14.336 8.021333 22.254934 8.021333 9.762133 0 19.456-4.096 26.248533-11.946667a33.450667 33.450667 0 0 0 7.850667-26.282666V501.623467l287.675733-292.693334a30.856533 30.856533 0 0 0 3.652267-4.3008c20.138667-22.528 31.1296-51.2 31.1296-81.271466C989.866667 55.296 933.546667 0 864.324267 0z"
                  fill="#ffffff" p-id="2805" />
              </svg>
              高级查询</el-button>
            <el-dropdown>
              <span class="el-dropdown-link">
                展开<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-form>

      <el-row>
        <el-col :span="24">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="onSubmit">新增</el-button>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="onSubmit">创建单据</el-button>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="onSubmit">一对多</el-button>
          <el-button type="primary" size="mini" icon="el-icon-download" @click="onSubmit">导出</el-button>
          <el-button type="primary" size="mini" @click="onSubmit">
            <svg t="1684763039429" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4981" width="10" height="10">
              <path
                d="M507.136 576L672 724.16 595.2 832 310.4 576H288V448h22.4L595.2 192 672 299.776 507.136 448H992v128H507.2zM800 128H160v768h640v-192h128v320H32V0h896v320h-128V128z"
                fill="#ffffff" p-id="4982" />
            </svg>
            导入</el-button>
        </el-col>
      </el-row>

      <div class="CustomCard">
        <el-row>
          <el-col :span="12">

            <div class="txtleft">已选择 <span class="txtblue">{{ num }}</span> 项</div>
            <span class="txtblue" @click="onclear">清空</span>

          </el-col>
          <el-col :span="12">
            <div class="txtright">
              <span class="txtblue"><i class="el-icon-refresh" />刷新</span>
              <span class="txtblue"><i class="el-icon-setting" />自定义列</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-table :data="tableData" border style="width: 100%"
        :header-cell-style="{ backgroundColor: '#fafafa', textAlign: 'center', color: '#000' }">
        <el-table-column label="姓名" width="180">
          <template slot="header" slot-scope="scope">
            <el-checkbox v-model="checked" />
          </template>
          <template slot-scope="scope">
            <el-checkbox v-model="form.checkeds" />
          </template>
        </el-table-column>
        <el-table-column label="#" width="180">
          <template v-slot="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="KeyWords" label="关键词" width="180" />
        <el-table-column prop="Punch" label="打卡时间" width="180" />
        <el-table-column prop="sex" label="性别" width="180" />
        <el-table-column prop="age" label="年龄" width="180" />
        <el-table-column prop="birthday" label="生日" width="180" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="oneself" label="个人简介" width="180" />
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="24" class="txtblue">
                <span @click="endit(scope)">编辑</span>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    更多<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>黄金糕</el-dropdown-item>
                    <el-dropdown-item>狮子头</el-dropdown-item>
                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown></el-col>

            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <el-row class="paging">
        <el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
    </el-card>
    <editCard :dialog-visible.sync="dialogVisible" :form="form"/>
  </div>
</template>

<script>
import editCard from './component/editCard.vue'
export default {
  components: {
    editCard
  },
  data() {
    return {
      num: 0,
      checked: false,
      dialogVisible: false,
      search:{
        name: '',
        age: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      form: {
        checkeds: false,
        name: '王小虎',
        KeyWords: '小王',
        Punch: '2019-11-26 16:14:06',
        sex: '男',
        age: 22,
        birthday: '2000-12-06',
        email: '21313251@3211.com',
        oneself: '哈哈哈哈哈哈哈'
      },
      labelPosition: 'left',
      tableData: [{
        checkeds: false,
        name: '王小小小虎',
        KeyWords: '小王',
        Punch: '2019-11-26 16:14:06',
        sex: '男',
        age: 22,
        birthday: '2000-12-06',
        email: '21313251@3211.com',
        oneself: '哈哈哈哈哈哈哈'

      }, {
        checkeds: false,
        name: '王中虎',
        KeyWords: '小王',
        Punch: '2019-11-26 16:14:06',
        sex: '男',
        age: 22,
        birthday: '2000-12-06',
        email: '21313251@3211.com',
        oneself: '哈哈哈哈哈哈哈'

      },
      {
        checkeds: false,
        name: '王大虎',
        KeyWords: '小王',
        Punch: '2019-11-26 16:14:06',
        sex: '男',
        age: 22,
        birthday: '2000-12-06',
        email: '21313251@3211.com',
        oneself: '哈哈哈哈哈哈哈'

      },
      {
        checkeds: false,
        name: '王老虎',
        KeyWords: '小王',
        Punch: '2019-11-26 16:14:06',
        sex: '男',
        age: 22,
        birthday: '2000-12-06',
        email: '21313251@3211.com',
        oneself: '哈哈哈哈哈哈哈'

      },
      {
        checkeds: false,
        name: '王虎',
        KeyWords: '小王',
        Punch: '2019-11-26 16:14:06',
        sex: '男',
        age: 22,
        birthday: '2000-12-06',
        email: '21313251@3211.com',
        oneself: '哈哈哈哈哈哈哈'

      }, {
        checkeds: false,
        name: '王老虎',
        KeyWords: '小王',
        Punch: '2019-11-26 16:14:06',
        sex: '男',
        age: 22,
        birthday: '2000-12-06',
        email: '21313251@3211.com',
        oneself: '哈哈哈哈哈哈哈'

      }, {
        checkeds: false,
        name: '王老吉',
        KeyWords: '小王',
        Punch: '2019-11-26 16:14:06',
        sex: '男',
        age: 22,
        birthday: '2000-12-06',
        email: '21313251@3211.com',
        oneself: '哈哈哈哈哈哈哈'

      }, {
        checkeds: false,
        name: '加多宝',
        KeyWords: '小王',
        Punch: '2019-11-26 16:14:06',
        sex: '男',
        age: 22,
        birthday: '2000-12-06',
        email: '21313251@3211.com',
        oneself: '哈哈哈哈哈哈哈'

      }]
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    onclear() {
      console.log('清空')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 点击编辑
    endit({row}){
      console.log(row);
      this.dialogVisible = true;
      // 数据回显
      this.form = row
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}

.el-input {
  width: 270px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  margin-left: 20px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.CustomCard {
  margin: 20px 0 20px 0;
  height: 40px;
  width: 100%;
  background-color: #e6f7ff;
  border: 1px solid #32acff;
  border-radius: 3px;
}

.txtleft {
  margin: 0 20px 0 30px;
  float: left;
  line-height: 40px;
  font-size: 14px;
}

.txtblue {
  color: #409eff;
  line-height: 40px;
  font-size: 14px;
  cursor: pointer
}

.txtright {
  float: right;
}

.txtright>span {
  margin-right: 20px;
}

.paging {
  float: right;
}
</style>

